<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<style>
			.box1{
				border:1px green solid;
				width:200px; /* 盒子的宽度 */
				height:300px;/* 高 */
				/* padding-top: 100px; *//* 上内边距 */
				/* padding-bottom: 20px; */ /* 下内边距 */
				/* padding-left: 30px; */  /* 左内边距 */
				/* padding-right: 40px; */ /* 右内边距 */
				/* 复合写法 padding: */
			/* padding: 10px 20px 30px 40px; */  /* 上右下左 */
				/* padding:10px 20px 30px; */ /* 上 ,左右,下 */
			/* 	padding:10px 20px; */
				/* padding: 10px; */
			margin-top: 100px;
			margin-left: 100px;
			margin-left: 100px;
			margin-right: 100px;
			margin-bottom:100px;
			/* 复合写法margin:大小值 */
			margin: 10px 20px 30px 40px;
			/* 盒子水平居中: 左右外边距设置为auot */
			margin :  100px   auto  80px;/* auto: 自动居中 */
			}
			.box2{
				width:200px;
				height: 300px;
				border:2px dotted red;
				margin: 100px auto 0 ;
			}
			/* 相邻两个盒子之间的外边距合并问题:
			 两个盒子同时 设置了外边距,相同随便只取外边距最大的一个的值 
			  tips : 一般来说只设置一个盒子外边距*/
			  .nbox{
				  width:200px;
				  height:200px;
				  background-color: hotpink ;
				 padding:100px;
			
				
				  
			  }
			  .wbox{
				  width: 100px;
				  height:100px;
				  background-color: skyblue ;
			    margin-top : auto;
			
				  
			  }
		</style>
	</head>
	<body>
		<!-- 	盒子模型4个元素：
			1.content内容
			2.padding内边距 -内容到边框的距离
			3.border边框
			4.margin外边框
			 border 复合写法:大小 颜色 样式-->
		
			 <div class="box1">hello world！</div>
			 <div class="box2">  hello</div>
			 <div class ="nbox">
				 <div class="wbox"></div>
	</body>
</html>
